// 国控断面
.controlLevel0 {
  color: #f56b6d;
  padding: 0px 6px;
  border: 1px solid #f56b6d;
  display: inline-block;
  background-color: rgba($color: #f56b6d, $alpha: 0.2);
  box-sizing: border-box;
}

// 省控断面
.controlLevel1 {
  color: #41b76a;
  padding: 0px 6px;
  border: 1px solid #41b76a;
  background-color: rgba($color: #41b76a, $alpha: 0.2);
  display: inline-block;
  box-sizing: border-box;
}

// 市控/州控/旗控断面
.controlLevel2 {
  color: #ff6c00;
  padding: 0px 6px;
  border: 1px solid #ff6c00;
  background-color: rgba($color: #ff6c00, $alpha: 0.2);
  display: inline-block;
  box-sizing: border-box;
}

// 县控断面
.controlLevel3 {
  color: #307eff;
  padding: 0px 6px;
  border: 1px solid #307eff;
  background-color: rgba($color: #307eff, $alpha: 0.2);
  display: inline-block;
  box-sizing: border-box;
}

$colorList: #03b32b,
#ead50e,
#f27e0a,
#fa3d29,
#b23655,
#307eff,
#aaaaaa;

@for $i from 1 through 6 {
  $color: nth($colorList, $i);

  .drinkType#{$i} {
    color: $color;
    font-size: 14px;
    padding: 0px 6px;
    border: 1px solid $color;
    background-color: rgba($color, 0.2);
    box-sizing: border-box;
    height: 20px !important;
    line-height: 1 !important;
  }
}

// 水质类别
$level1: #ccffff;
$level2: #00ccff;
$level3: #00ff00;
$level4: #ffff00;
$level5: #ff9b00;
$level6: #ff0000;
$nonelevel: #757f8d;

.quality:not(.full) {
  // color: #FFFFFF;
  padding: 0px 6px;
  min-width: 50px;
  display: inline-block;
  text-align: center;
}

.qualityLevel {
  @extend .quality;
  color: #ffffff;
  background-color: $nonelevel !important;
  border: 1px solid rgba($nonelevel, 1);

  &.border {
    border: 2px solid rgba($nonelevel, 0.2);
  }
}

.qualityLevel1 {
  @extend .quality;
  color: #333;
  background-color: $level1 !important;
  border: 1px solid rgba($level1, 1);

  &.border {
    border: 2px solid rgba($level1, 0.2);
  }
}

.qualityLevel2 {
  @extend .quality;
  color: #333;
  background-color: $level2 !important;
  border: 1px solid rgba($level2, 1);

  &.border {
    border: 2px solid rgba($level2, 0.2);
  }
}

.qualityLevel3 {
  @extend .quality;
  color: #333;
  background-color: $level3 !important;
  border: 1px solid rgba($level3, 1);

  &.border {
    border: 2px solid rgba($level3, 0.2);
  }
}

.qualityLevel4 {
  @extend .quality;
  color: #333;
  background-color: $level4 !important;
  border: 1px solid rgba($level4, 1);

  &.border {
    border: 2px solid rgba($level4, 0.2);
  }
}

.qualityLevel5 {
  @extend .quality;
  color: #ffffff;
  background-color: $level5 !important;
  border: 1px solid rgba($level5, 1);

  &.border {
    border: 2px solid rgba(#ffffff, 0.2);
  }
}

.qualityLevel6 {
  @extend .quality;
  color: #ffffff;
  background-color: $level6 !important;
  border: 1px solid rgba($level6, 1);

  &.border {
    border: 1px solid rgba($level6, 0.2);
  }
}

.over {
  color: #ff544c !important;

  &.border {
    padding: 0 6px;
    display: inline-block;
    text-align: center;
    border: 1px solid #ff544c;
    background-color: rgba($color: #ff544c, $alpha: 0.1);
  }
}

.noOver {
  color: #49b72a !important;

  &.border {
    padding: 0 6px;
    display: inline-block;
    text-align: center;
    border: 1px solid #49b72a;
    background-color: rgba($color: #49b72a, $alpha: 0.1);
  }
}

.valueWarning {
  background-color: #ffff00 !important;
}

.overWarning {
  background-color: #f8ac59 !important;
}

$waterQuality: #3862d8,
#3862d8,
#49b72a,
#f8c42c,
#ff8e43,
#f44e46,
#aaaaaa;

@for $i from 1 through 6 {
  $color: nth($waterQuality, $i);

  .waterQuality#{$i} {
    color: $color;

    &.border {
      padding: 2px 4px;
      border: 1px solid $color;
      background-color: rgba($color, 0.1);
    }
  }
}

$assessment: #428eff,
#49b72a,
#f8c42c,
#ff8e43,
#f44e46,
#aaaaaa;

@for $i from 1 through 6 {
  $color: nth($assessment, $i);

  .assessment#{$i} {
    color: $color;

    &.border {
      width: 68px;
      display: inline-block;
      text-align: center;
      border: 1px solid $color;
      background-color: rgba($color, 0.1);
    }
  }
}

$pollutionList: #ea980a,
#ff4848,
#54c851,
#307eff;

@for $i from 1 through length($pollutionList) {
  $color: nth($pollutionList, $i);

  .pollution#{$i} {
    color: $color;
    padding: 0 4px;
    background-color: rgba($color, 0.1);
    border: 1px solid $color;
  }
}
